import React from "react";
import { Card, Form, Input, Button, Space } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { message } from "antd";
import "antd/dist/reset.css";
import request from "../../api/request";

const Login = () => {
    const [messageApi, contextHolder] = message.useMessage();

    // 使用antd Form的内置表单处理
    const onFinish = (values) => {
        request
            .post("/login", {
                username: values.username,
                password: values.password,
            })
            .then((res) => {
                console.log(res);
                if (res.data.meta.status === 200) {
                    // 消息提示
                    messageApi.open({
                        type: "success",
                        content: res.data.meta.msg,
                    });
                    // 存储个人信息
                    localStorage.setItem('token',res.data.data.token)
                    localStorage.setItem('username',res.data.data.username)
                    // 登录成功后跳转到首页
                    window.location.href = "/home";
                }
            });
    };

    return (
        <div
            style={{
                width: "100vw",
                minHeight: "100vh",
                background: "linear-gradient(135deg, #1890ff 0%, #096dd9 100%)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: "20px",
            }}
        >
            {contextHolder}
            <Card
                title="电商管理系统"
                style={{
                    width: 400,
                    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
                    borderRadius: 12,
                    border: "none",
                }}
                headStyle={{
                    textAlign: "center",
                    fontSize: "20px",
                    fontWeight: "bold",
                    borderBottom: "none",
                }}
            >
                <Form onFinish={onFinish} layout="vertical">
                    <Space direction="vertical" size="large" style={{ width: "100%" }}>
                        <Form.Item
                            name="username"
                            label="用户名"
                            rules={[{ required: true, message: "请输入用户名" }]}
                        >
                            <Input
                                prefix={<UserOutlined style={{ color: "#1890ff" }} />}
                                placeholder="请输入用户名"
                                size="large"
                            />
                        </Form.Item>

                        <Form.Item
                            name="password"
                            label="密码"
                            rules={[{ required: true, message: "请输入密码" }]}
                        >
                            <Input.Password
                                prefix={<LockOutlined style={{ color: "#1890ff" }} />}
                                placeholder="请输入密码"
                                size="large"
                            />
                        </Form.Item>

                        <Button
                            type="primary"
                            htmlType="submit"
                            size="large"
                            style={{ height: 48, fontSize: 16 }}
                            block
                        >
                            登录
                        </Button>
                    </Space>
                </Form>
            </Card>
        </div>
    );
};

export default Login;
